<template>
  <view class="record_root">
    <u-tabs
      :list="statusList"
      @change="onTabChange"
      :scrollable="false"
    ></u-tabs>

    <view class="list_box">
      <view
        class="record_item"
        v-for="(record, index) in dataList"
        :key="index"
      >
        <view class="with_flex with_bottom">
          <view class="name">{{ record.name }}</view>
          <view class="des">{{ record.dosage + record.unit }}</view>
        </view>
        <view
          class="msg_item"
          v-for="(msg, index) in msgList"
          :key="index"
        >
          <view class="left">
            {{ msg.name }}：
          </view>
          <view class="right all">
            {{ record[msg.key] | emptyStr }}
          </view>
        </view>
      </view>
    </view>
    <view
      class="common_float_btn"
      @click="toAdd"
    />

    <view
      class="common_float_btn chart"
      @click="toChart"
    />

    <HomeBtn :current="3" />
  </view>
</template>

<script>
import HomeBtn from '../../componet/homeBtn.vue';
export default {
  components: { HomeBtn },
  data() {
    return {
      visible: { show: false },
      statusList: [
        { name: "用药记录" }, { name: "健康记录" }
      ],
      dataList: [],
      record: [
        {
          name: "蓝芩口服液",
          dosage: 10,
          unit: 'ml',
          planName: "急性支气管炎",
          remark: "",
          time: "2024-03-02 14:28:48",
        },
        {
          name: "氨酚双氢可待因片",
          dosage: 1,
          unit: '片',
          planName: "急性支气管炎",
          remark: "",
          time: "2024-03-02 14:28:48",
        },
        {
          name: "蓝芩口服液",
          dosage: 10,
          unit: 'ml',
          planName: "急性支气管炎",
          remark: "",
          time: "2024-03-02 06:25:20",
        },
        {
          name: "氨酚双氢可待因片",
          dosage: 1,
          unit: '片',
          planName: "急性支气管炎",
          remark: "",
          time: "2024-03-02 06:25:20",
        },
        {
          name: "蓝芩口服液",
          dosage: 10,
          unit: 'ml',
          planName: "急性支气管炎",
          remark: "",
          time: "2024-03-01 22:20:48",
        },
        {
          name: "氨酚双氢可待因片",
          dosage: 1,
          unit: '片',
          planName: "急性支气管炎",
          remark: "",
          time: "2024-03-01 22:20:48",
        },
      ],
      msgList: [
        { name: "关联计划", key: "planName" },
        { name: "备注", key: "remark" },
        { name: "记录时间", key: "time" },
      ],
    };
  },
  methods: {
    onTabChange() {

    },
    toAdd() { },
    toChart() {
      uni.navigateTo({ url: "/pages/record/report" });
    },
  },
  mounted() {
    this.dataList = this.record;
  },
  created() { },
};
</script>

<style
  lang="scss"
  scoped
>
.record_root {
  background: #F8FAFE;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 98rpx;
  box-sizing: border-box;

  .list_box {
    flex: 1;
    overflow: auto;
    padding: 24rpx 40rpx 1rpx;

    .record_item {
      margin-bottom: 24rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 24rpx 40rpx;

      .name {
        font-size: 34rpx;
        font-weight: 800;
        color: #0D1F4F;
        line-height: 48rpx;
      }

      .des {
        margin: 0 40rpx;
        flex: 1;

        /*字体样式*/
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #9DA7C0;
        line-height: 48rpx;
      }

    }
  }
}
</style>